<template>
<div class="bg-[url('/src/assets/images/bg.png')] bg-cover w-full h-screen flex">
  <div class="flex-1"></div>
  <div class="flex-1 flex h-full pt-20 justify-center">
   <div class="w-96 h-120 border-solid border-slate-300 border shadow-md rounded-lg px-5 py-10 ml-4 bg-white animation-show">
     <div class="flex items-center justify-center bounce">
       <img class="logo" src="" />
       <div class="text-2xl tracking-widest font-semibold text-blue-400">
         XX实业有限公司
       </div>
     </div>
     <div
         class="justify-center text-center mt-4 text-blue-400 font-semibold"
     >
       后台权限管理系统 v1.0.1
     </div>
     <el-form
         ref="loginFormRef"
         :model="loginForm"
         :rules="loginRules"
         class="ml-8 mr-8 h-60"
         :class="!captchaEnabled?'pt-20':'pt-8'"
     >
       <el-form-item prop="username" class="">
         <el-input
             v-model="loginForm.username"
             placeholder="请输入帐号名称"
         >
           <template #prefix>
             <i class="iconfont icon-yonghu" />
           </template>
         </el-input>
       </el-form-item>
       <el-form-item prop="password" class="login-animation2">
         <el-input
             type="password"
             v-model="loginForm.password"
             placeholder="请输入密码"
             show-password
             @keyup.enter="login"
         >
           <template #prefix>
             <i class="iconfont icon-tianchongxing-" />
           </template>
         </el-input>
       </el-form-item>
       <el-form-item
           prop="code"
           v-if="captchaEnabled"
           class="flex login-animation3"
       >
         <el-input
             v-model="loginForm.code"
             size="large"
             auto-complete="off"
             placeholder="验证码"
             style="width: 40%"
             @keyup.enter="login"
         >
           <template #prefix>
             <i class="iconfont icon-yanzhengyanzhengma" />
           </template>
         </el-input>
         <div>
           <img :src="codeUrl" @click="getCode" />
         </div>
       </el-form-item>
       <el-form-item class="mb-1 mt-6 ">
         <el-button type="primary" @click="login" style="width: 100%">
           立即登录
         </el-button>
       </el-form-item>
     </el-form>
     <div class="mt-2 text-blue-400 text-sm text-center">
       <p class="leading-5">版权所有(C)2024 XX实业有限公司</p>
       <p class="leading-5">联系方式：13612345678</p>
     </div>
   </div>
  </div>
</div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {slogin} from "@api/user";
import {getCodeImg} from "@api/sys";

const loginFormRef = ref()
const loginForm = reactive({
  username: '',
  password: '',
  code: '',
  uuid: '',
})
const codeUrl = ref('')
const captchaEnabled = ref(false)
const loginRules = reactive({})
const login = () =>{
  slogin(loginForm).then(res=>{
    if(200 != res?.code){
      getCode(loginForm.uuid)
    }
  })
}
const getCode = () => {
  getCodeImg(loginForm.uuid).then(res=>{
    if(200 === res?.code){
      captchaEnabled.value = res.captchaEnabled
      if(captchaEnabled.value && res?.img) {
        codeUrl.value = 'data:image/gif;base64,' + res.img
      }
      loginForm.uuid = res.uuid
    }
  })
}
onMounted(()=>{
  getCode()
})
</script>

<style scoped>

</style>